<template>
  <input
    class="Input"
    v-model="newItem"
    @keyup.enter="emitAddItem"
    type="text"
    placeholder="你接下来要做什么？"/>
</template>

<script setup>
import { ref } from 'vue';
import { defineEmits } from 'vue';

const newItem = ref('');
const emit = defineEmits(['add-item']);

const emitAddItem = () => {
  if (newItem.value.trim()) {
    emit('add-item', newItem.value);
    newItem.value = '';
  }
};



</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.Input {
  width: 100%;
  height: 30px;
}

</style>
